<template>
<!-- 注意包装wrapper要写 -->
  <div id="category" ref="">
     <nav-bar class="nav-bar"><div slot="center">商品分类</div></nav-bar>
    
    <div class="content">
      <tab-menu :categories="categories" @selectItem="selectItem"></tab-menu>

      <scroll id="tab-content" >
        <div>
          <!-- 子菜单-->
          <tab-content-category :subcategories="showSubcategory"></tab-content-category>
          <!--tabcontrol-->
          <tab-control :titles="['综合', '新品', '销量']"
                       @tabClick="tabClick"></tab-control>
          <!--具体展示-->
          <tab-content-detail :category-detail="showCategoryDetail"></tab-content-detail>
        </div>
      </scroll>

    </div>
  </div>

</template>

<script>
  //导入better-scroll.esm(esmoudle).js   如果普通script引入则引入.js文件
  // import BScroll from 'better-scroll'

  import NavBar from '@/components/common/navbar/NavBar'

  import TabMenu from './childComps/TabMenu'
  import TabControl from '@/components/content/tabControl/TabControl'
  import Scroll from "@/components/common/scroll/Scroll";
  import TabContentCategory from './childComps/TabContentCategory'

  import TabContentDetail from './childComps/TabContentDetail'

  import {getCategory, getSubCategory ,getCategoryDetail} from "../../network/category";

  export default {
    name: "Category",
    data() {
      return {
        categories: [],
        categoryData: {},
        
        currentIndex: -1,
        currentType: 'pop'
      }
    },
    components:{
      //导航栏
      NavBar,
      TabMenu,
      Scroll,
      TabContentCategory,
      TabControl,
      TabContentDetail
    },
    created() {
      // 1.请求分类数据
      this._getCategory()


    },
    computed:{
      showSubcategory() {
        if (this.currentIndex === -1) return {}
        return this.categoryData[this.currentIndex].subcategories
      },
      showCategoryDetail() {
        if (this.currentIndex === -1) return []
        return this.categoryData[this.currentIndex].categoryDetail[this.currentType]
      }
    },
    // 组件创建完后调用(不要使用created)
    mounted() {

    },
    methods: {
      _getCategory() {
        getCategory().then(res => {
          // 1.获取分类数据
          // console.log(res)
          this.categories = res.data.category.list
          // console.log(this.categories)
          // 2.初始化每个类别的子数据
          for (let i = 0; i < this.categories.length; i++) {
            //i: 0 1 2 3 4 5 6 ...15
            this.categoryData[i] = {
              subcategories: {},
              categoryDetail: {
                'pop': [],
                'new': [],
                'sell': []
              }
            }
          }
          // 3.请求第一个分类的数据
          this._getSubcategories(0)
        })
      },

      _getSubcategories(index) {
        this.currentIndex = index;
        const mailKey = this.categories[index].maitKey;
        console.log(mailKey)
        //用maitkey 获取 子菜单
        getSubCategory(mailKey).then(res => {
          console.log('-----')
          console.log(res.data)
          this.categoryData[index].subcategories = res.data
          //   ？？？？？？？
          this.categoryData = {...this.categoryData}
          
          
          this._getCategoryDetail('pop')
          this._getCategoryDetail('sell')
          this._getCategoryDetail('new')
        })
      },

      _getCategoryDetail(type) {
        // 1.获取请求的miniWallkey
        const miniWallkey = this.categories[this.currentIndex].miniWallkey;
        // 2.发送请求,传入miniWallkey和type
        getCategoryDetail(miniWallkey, type).then(res => {
          // 3.将获取的数据保存下来
          // console.log(res)
          this.categoryData[this.currentIndex].categoryDetail[type] = res
          // this.categoryData = {...this.categoryData}
          //???
         /* console.log('*****')
          console.log( this.categoryData)
          this.categoryData = {...this.categoryData}
          console.log( this.categoryData)*/
        })
      },

      /**
       * 事件响应相关的方法
       */
      selectItem(index) {
        this._getSubcategories(index)
      },

      tabClick(index){
        switch (index) {
          case 0:

            this.currentType = 'pop'
            break
          case 1:

            this.currentType = 'new'
            break
          case 2:

            this.currentType = 'sell'
            break
        }
        console.log(this.currentType);
      }
    }
  }
</script>

<style scoped>

  .nav-bar {
    background-color: var(--color-tint);
    font-weight: 700;
    color: #fff;
    /*position: fixed;*/
    /*z-index: 9999;*/
  }

  #category {
    height: 100vh;
  }
  .content {

    position: absolute;
    left: 0;
    right: 0;
    top: 44px;
    bottom: 49px;

    display: flex;
    overflow: hidden;
  }

  #tab-content {
    height: 100%;
    flex: 1;
  }
</style>
